<template>
  <Carousel />
  <PageCard title="热门课程">
    <HotCourse :CourseData="hotCourses.data"></HotCourse>
  </PageCard>
  <div ref="goodCourses">
    <PageCard title="精品课程" href="/courses">
      <GoodCourse :goodCourses="goodCoursesRef.data"></GoodCourse>
    </PageCard>
  </div>
  <PageCard title="班级推荐">
    <ClassroomList :classroomData="classroomData" />
    <ClassroomNews></ClassroomNews>
  </PageCard>
  <PageCard title="话题精选">
    <TopicList :topicData="topicData" />
  </PageCard>
  <PageCard title="热门标签" :isNotNeedMore="true">
    <HotTag></HotTag>
  </PageCard>
  <PageCard title="认证达人" :isMoreBtn="true">
    <DarenList />
  </PageCard>
</template>

<script>

import Carousel from '../Carousel'
import PageCard from '../PageCard'
import HotCourse from '../HotCourse'
import GoodCourse from '../GoodCourse'
import ClassroomList from '../ClassroomList'
import ClassroomNews from '../ClassroomNews'
import TopicList from '../TopicList'
import HotTag from '../HotTag'
import DarenList from '../DarenList'
import { getHotCourses, getClassroomList, getTopicList } from '../../api'
import { onMounted, reactive, getCurrentInstance } from 'vue'
export default {
  setup () {
    const hotCourses = reactive({
      data: []
    })
    const goodCoursesRef = reactive({
      data: []
    })
    const classroomData = reactive({
      data: []
    })
    const topicData = reactive({
      data: []
    })
    const instance = getCurrentInstance()
    onMounted(async () => {
      const CoursesRes = await getHotCourses()
      hotCourses.data = CoursesRes.data
      console.log(hotCourses.data)

      // const thisRef = instance.ctx.$refs?.goodCourses
      // goodCoursesRef.data = thisRef.offsetTop
      // goodCoursesRef.data = thisRef.offsetTop + thisRef.offsetHeight / 2
      const classroomRes = await getClassroomList()
      classroomData.data = classroomRes.data
      console.log(classroomData.data)
      const topicRes = await getTopicList()
      topicData.data = topicRes.data
    })
    return { hotCourses, goodCoursesRef, classroomData, topicData }
  },
  name: 'Home',
  components: {
    Carousel,
    PageCard,
    HotCourse,
    GoodCourse,
    ClassroomList,
    ClassroomNews,
    TopicList,
    HotTag,
    DarenList
  }
}
</script>

<style>
</style>
